﻿<h4>Stroke and Color</h4>

<FluentSelect Label="Width" Items="@(new [] { ProgressStroke.Small, ProgressStroke.Normal, ProgressStroke.Large })" @bind-SelectedOption="@Stroke" Width="60px" />
<FluentCheckbox Label="Indeterminate" @bind-Value="@Indeterminate" />
<FluentSelect Label="Color" Items="@(Enum.GetValues<OfficeColor>())" @bind-SelectedOption="@Color" Width="100px" Height="200px" />
<FluentSlider Min="0" Max="100" Step="5" @bind-Value="@Percentage" Style="max-width: 200px; margin: 20px 0px;" Disabled="@Indeterminate" />

<FluentStack Style="margin: 30px;">
    <FluentLabel Style="width: 20px;">@Percentage</FluentLabel>

    <FluentProgressRing Value="@(Indeterminate ? null : Percentage)"
                        Width="32px"
                        Stroke="@Stroke"
                        Color="@(Color.ToAttributeValue())" />

    <FluentProgressRing Value="@(Indeterminate ? null : Percentage)"
                        Width="64px"
                        Stroke="@Stroke"
                        Color="@(Color.ToAttributeValue())" />

    <FluentProgressRing Value="@(Indeterminate ? null : Percentage)"
                        Width="128px"
                        Stroke="@Stroke"
                        Color="@(Color.ToAttributeValue())" />
</FluentStack>

@code
{
    ProgressStroke Stroke = ProgressStroke.Normal;
    int Percentage = 30;
    bool Indeterminate = false;
    OfficeColor Color = OfficeColor.Default;
}